<template>
  <a-modal class="notice-detail-modal" simple :render-to-body="false" :footer="false" v-model:visible="showvisible" @cancel="showvisible = false" :width="1250">
    <div class="detail-con" v-loading="loading">
      <div class="left">
        <div class="top flex-c">
          <div class="title">公告栏</div>
          <a-button style="margin-left: 50px" type="text" @click="readAll">全部已读</a-button>
        </div>

        <div class="list-con" v-if="noticeList.length > 0">
          <a-scrollbar style="height: 570px; overflow: auto; margin-top: 5px">
            <div>
              <div @click="sel(item, index)" :class="['item', selIndex == index ? 'active' : '', 'cursor']" v-for="(item, index) of noticeList" :key="index">
                <a-space>
                  <div style="width: 180px">
                    <div :class="['head-desc', selIndex == index ? 'active-text' : '', 'text-limit']">{{ item.title }}</div>
                    <div>{{ $setTime(item.gmtCreate) }}</div>
                  </div>
                  <div class="ml10 flag" v-if="!item.noticeRead"></div>
                </a-space>
              </div>
            </div>
          </a-scrollbar>
          <div style="display: flex; justify-content: center">
            <a-pagination class="mt10" size="mini" :total="pageNation.total" simple :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @change="changePage" />
          </div>
        </div>
        <a-empty style="margin-top: 30px" v-else description="暂无公告" />
      </div>
      <div class="right">
        <icon-close @click="showvisible = false" class="cursor my-icon" />

        <div class="top">
          <div class="title text-limit">{{ curData.title }}</div>
          <div class="time common-text">发布时间：{{ $setTime(curData.gmtCreate) }}</div>
        </div>
        <a-scrollbar v-if="noticeList.length > 0" style="height: 640px; overflow: auto; margin-top: 5px">
          <div class="content-container" v-html="curData.content"></div>
        </a-scrollbar>
      </div>
    </div>
  </a-modal>

  <a-image-preview-group v-model:visible="showBigImgVisible" v-model:current="current" infinite :srcList="imgSrcList" />
</template>

<script lang="ts" setup>
  import { defineComponent, ref, computed, onMounted, nextTick } from 'vue'
  import { findNoticePage, readNotice, getNoticeInfo } from '@/api/home'
  let props = defineProps(['modelValue', 'id'])
  let emits = defineEmits(['update:modelValue'])
  let showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })
  let pageNation = ref({ total: 50, pageNum: 1, pageSize: 40 })
  let noticeList: any = ref([])
  let imgSrcList: any = ref<Array<string>>([])
  let selIndex = ref(0)
  let current = ref(0)
  let curData: any = ref({})
  let loading = ref(false)
  let showBigImgVisible = ref(false)
  const changePage = (val: number) => {
    selIndex.value = 0
    pageNation.value.pageNum = val
    getList()
  }
  const sel = (info: any, index: number) => {
    selIndex.value = index
    curData.value = info
    getDetail()
  }

  const setImgFunc = () => {
    nextTick(() => {
      let imgHtmlList = document.querySelector('.content-container')?.querySelectorAll('img') || []
      imgHtmlList.forEach((e) => {
        e.classList.add('cursor')
        imgSrcList.value.push(e.src || '')
        e.onclick = (event: any) => {
          let curClickURL = event?.target?.src || ''
          let index = imgSrcList.value.findIndex((e: any) => e === curClickURL)
          if (index != -1) current.value = index
          showBigImgVisible.value = true
        }
      })
    })
  }

  const getList = async () => {
    let params = {
      pageNum: pageNation.value.pageNum,
      pageSize: pageNation.value.pageSize,
    }
    try {
      loading.value = true
      const res: any = await findNoticePage(params)
      noticeList.value = res.data.records || []
      pageNation.value.total = res.data.total
      if (props.id) {
        let index = noticeList.value.findIndex((item: any) => item.id == props.id)
        if (index > -1) selIndex.value = index
      }
      curData.value = noticeList.value[selIndex.value]
      getDetail()
    } catch (error) {}
    loading.value = false
  }

  const readAll = async () => {
    let params = {
      ids: noticeList.value.map((item: any) => item.id),
    }
    await readNotice(params)
    getList()
  }

  const getDetail = async () => {
    let params = {
      id: curData.value.id,
    }
    const res: any = await getNoticeInfo(params)
    curData.value = res.data || {}
    // getList()
    noticeList.value.forEach((e: any) => {
      if (e.id == curData.value.id) {
        e.noticeRead = true
      }
    })

    setImgFunc()
  }

  onMounted(async () => {
    await getList()
  })
</script>

<style>
  .notice-detail-modal .arco-modal-simple {
    padding: 0;
    height: 740px;
    overflow: hidden;
  }
  .notice-detail-modal .arco-modal-header {
    margin-bottom: 0;
  }
</style>

<style lang="less" scoped>
  .detail-con {
    height: 100%;
    display: flex;
    .left {
      width: 240px;
      height: 740px;
      background-color: #f5f7fa;
      .top {
        height: 90px;
        // display: flex;
        // justify-content: space-between;
        .title {
          font-size: 30px;
          margin-left: 10px;
        }
      }
    }
    .right {
      flex: 1;
      padding: 20px;
      position: relative;
      .my-icon {
        position: absolute;
        right: 20px;
        top: 20px;
        font-size: 20px;
      }
      .top {
        height: 60px;
        .title {
          width: 900px;
          font-size: 24px;
        }
        .time {
          // margin-top: 5px;
        }
      }
    }

    .list-con {
      .item {
        position: relative;
        height: 60px;
        border-bottom: 1px solid #d7d7d7;
        padding: 10px 20px 0;
        font-size: 12px;
        &:hover {
          // background-color: #e9e9e9;
        }

        &:first-child {
          border-top: 1px solid #d7d7d7;
        }

        .active-text {
          color: #2561ef;
        }

        .flag {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #55b744;
        }
      }
      .active {
        background-color: white;
        &:after {
          position: absolute;
          top: 0;
          left: 0;
          display: inline-block;
          content: '';
          width: 5px;
          height: 60px;
          background-color: #2561ef;
          border-top-left-radius: 3px;
          border-bottom-left-radius: 3px;
        }
      }
    }
  }
</style>
